<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/template-web.js"></script>
</head>
<body>
    <script type="text/html" id="demo">
        {{each arrs value index}}
            <div>
                <p>{{value.username}}</p>
                <p>{{value.age}}</p>
                <p>{{value.sex}}</p>
            </div>
        {{ /each }}
    </script>
    <div id="mydiv">

    </div>
    <div id="mydiv2">

    </div>
    <script>
        var  arrs=[
            {
                username:"alice",
                age:20,
                sex:"男"
            },
            {
                username:"tom",
                age:22,
                sex:"男"
            },
            {
                username:"coco",
                age:23,
                sex:"女"
            }
        ];

        var str=template("demo",{"arrs":arrs});
        document.getElementById("mydiv").innerHTML=str;

        let strs=`
            {{each arrs value index}}
                <div>
                    <p>{{value.username}}</p>
                    <p>{{value.age}}</p>
                    <p>{{value.sex}}</p>
                </div>
            {{ /each }}
            
        `;
        var s=template.render(strs,{"arrs":arrs});
        document.getElementById("mydiv2").innerHTML=s;
    </script>
</body>
</html>